<template>
  <div class="page">
    <!--搜索-->
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.user"
                  placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formInline.email"
                  placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSearch">查询</el-button>
        <el-button type="success"
                   @click="dialogAddUserFormVisible=true">添加</el-button>
                   <el-button type="success"
                   @click="dialogExcelVisible=true">上传</el-button>
                   <el-button type="success"
                   @click="onDonwLoadExcel">下载</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column type="selection"
                       width="55">

      </el-table-column>
      <el-table-column prop="NickName"
                       label="用户名"
                       width="180">
      </el-table-column>
      <el-table-column prop="PassWord"
                       label="密码"
                       width="180">
      </el-table-column>
      <el-table-column prop="Email"
                       label="邮箱"
                       width="280">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini"
                     type="warning"
                     @click="handleSetRole(scope.row)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="5"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>

    <!--添加模态-->
    <el-dialog title="用户添加"
               :visible.sync="dialogAddUserFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名"
                      :label-width="formLabelWidth">
          <el-input v-model="form.NickName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      :label-width="formLabelWidth">
          <el-input v-model="form.PassWord"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别"
                      :label-width="formLabelWidth">
          <el-radio v-model="form.Sex"
                    label="1">男</el-radio>
          <el-radio v-model="form.Sex"
                    label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="邮箱"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Email"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色"
                      :label-width="formLabelWidth">
          <el-checkbox-group v-model="rolesItmes">
            <el-checkbox v-for="(item,index) in checkItems"
                         :key="index"
                         :label="item.RoleId">{{item.RoleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="部门"
                      :label-width="formLabelWidth">
          <el-cascader v-model="value"
                       :options="options"
                       @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!--分配角色-->
    <el-dialog title="分配角色"
               :visible.sync="dialogVisibleRole"
               width="30%"
               >
      <el-tree :data="roleTree"
               show-checkbox
               node-key="RoleId"
               ref="tree"
               :props="defaultProps">
      </el-tree>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisibleRole = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSetUserRole">确 定</el-button>
      </span>
    </el-dialog>


    <!--上传Excel-->
    <el-dialog
  title="上传Excel"
  :visible.sync="dialogExcelVisible"
  width="30%"
  >
  <el-upload
  class="upload-demo"
  drag
  :on-success=onUploadSuccess
  action="http://localhost:5000/api/User/UpLoad"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogExcelVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogExcelVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import $http from '../../request/http'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      formInline: {
        user: '',
        email: '',
      },
      tableData: [],
      totalPage: 0,
      totalCount: 0,
      dialogAddUserFormVisible: false,
      dialogVisibleRole: false, //模态角色
      form: {
        NickName: '',
        PassWord: '',
        Sex: '1',
        Email: '',
        RoleIds: '',
      },
      rolesItmes: [],
      checkItems: [], //角色多选
      formLabelWidth: '120px',
      dialogExcelVisible : false, // ExcelDialog

      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
                {
                  value: 'xiaolv',
                  label: '效率',
                },
                {
                  value: 'kekong',
                  label: '可控',
                },
              ],
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航',
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航',
                },
              ],
            },
          ],
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局',
                },
                {
                  value: 'color',
                  label: 'Color 色彩',
                },
                {
                  value: 'typography',
                  label: 'Typography 字体',
                },
                {
                  value: 'icon',
                  label: 'Icon 图标',
                },
                {
                  value: 'button',
                  label: 'Button 按钮',
                },
              ],
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框',
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框',
                },
                {
                  value: 'input',
                  label: 'Input 输入框',
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器',
                },
                {
                  value: 'select',
                  label: 'Select 选择器',
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器',
                },
                {
                  value: 'switch',
                  label: 'Switch 开关',
                },
                {
                  value: 'slider',
                  label: 'Slider 滑块',
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器',
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器',
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器',
                },
                {
                  value: 'upload',
                  label: 'Upload 上传',
                },
                {
                  value: 'rate',
                  label: 'Rate 评分',
                },
                {
                  value: 'form',
                  label: 'Form 表单',
                },
              ],
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格',
                },
                {
                  value: 'tag',
                  label: 'Tag 标签',
                },
                {
                  value: 'progress',
                  label: 'Progress 进度条',
                },
                {
                  value: 'tree',
                  label: 'Tree 树形控件',
                },
                {
                  value: 'pagination',
                  label: 'Pagination 分页',
                },
                {
                  value: 'badge',
                  label: 'Badge 标记',
                },
              ],
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告',
                },
                {
                  value: 'loading',
                  label: 'Loading 加载',
                },
                {
                  value: 'message',
                  label: 'Message 消息提示',
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框',
                },
                {
                  value: 'notification',
                  label: 'Notification 通知',
                },
              ],
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单',
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页',
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑',
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单',
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条',
                },
              ],
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框',
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示',
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框',
                },
                {
                  value: 'card',
                  label: 'Card 卡片',
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯',
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板',
                },
              ],
            },
          ],
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components',
            },
            {
              value: 'sketch',
              label: 'Sketch Templates',
            },
            {
              value: 'jiaohu',
              label: '组件交互文档',
            },
          ],
        },
      ],
      //角色字段关联
      defaultProps: {
        children: 'children',
        label: 'RoleName',
        id: 'RoleId',
      }, //获取角色信息
      roleTree: [],
      //用户ID
      userId:'',
      //角色数组
      roles:[]
    }
  },
  components: {},
  methods: {
    //部门触发方法
    handleChange(value) {
      console.log(value)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleGetList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.handleGetList()
    },
    //分配角色
    handleSetRole(row) {
      this.dialogVisibleRole = true
      this.userId = row.UserId

    this.$nextTick(()=>{
        this.$refs.tree.setCheckedKeys([1,2]);
    })
     
     


    //   $http('//',this.userId).then(res=>{
    //       res.data.PageData
    //   })

      

    },
    //保存用户角色
    onSetUserRole(){
        this.dialogVisibleRole = false;
        
        // //获取角色ID
        // let nodes =  this.$refs.tree.getCheckedNodes()
        // nodes.filter(item=>{
        //    this.roles.push(item.RoleId)  
        // })
        // console.log(this.roles);

        // $http.post('//',{
        //     UserId:this.userId,  //用户ID
        //     RoleIds:this.roles.toString()
        // }).then(res=>{

        // })

    },
    //首页列表
    handleGetList() {
      $http
        .get('/User/page/' + this.pageSize + '/' + this.currentPage + '', {
          params: {
            uName: this.user,
            eMail: this.eMail,
          },
        })
        .then((res) => {
          this.totalPage = res.data.PageTotal
          this.totalCount = res.data.RecordTotal
          this.tableData = res.data.PageData
        })
    },
    //加载模态 角色
    getRoleCheckedItems() {
      $http.get('/Role/rolelist/').then((res) => {
        this.checkItems = res.data.Data
      })
    },
    //查询
    onSearch() {},
    //添加用户
    onSubmit() {
      //关闭模态
      this.dialogAddUserFormVisible = false
      this.form.RoleIds = this.rolesItmes.toString()
      $http.post('/User/AddUser', this.form).then((res) => {
        if (res.data.Code > 0) {
          this.$message.success('添加成功')
          this.handleGetList()
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    //获取角色列表
    getRoleList() {
      $http.get('/Role/rolelist').then((res) => {
        this.roleTree = res.data.Data
      })
    },
    onUploadSuccess(res){
        //console.log(res.Result);
        if (res.Result.Code==200) {
            this.$message.success('上传Excel成功');
            this.dialogExcelVisible = false;
            this.handleGetList();
        }else{
            this.$message.success('上传Excel失败');
        }
    },
    onDonwLoadExcel(){
        window.open('http://localhost:5000/api/User/DownloadExcel')
    }
  },
  created: function () {
    this.handleGetList()
    this.getRoleCheckedItems()
    this.getRoleList()
  },
}
</script>

<style scoped>
.page {
  padding-top: 10px;
}
</style>
